import React from 'react';

import Header from '../common/Header';
import CKModal from '../components/CKModal';
import Validate from '../common/Validate';

import {
    Button,
    Input,
    Form,
} from 'amazeui-react';

import Fetch from '../common/Fetch';

import $ from 'jquery';

class ArticleCategoryEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {
                ctg_id: this.props.params.id || '',
                ctg_name: '',
                ctg_eng_name: '',
                ctg_parent_id: 0,
                ctg_parent_name: '',
                ctg_link: '',
                ctg_publish_path: '',
                tmp_id: '',
                tmp_name: ''
            },
            tmp_id: '',
            tmp_data: [],
            is_save: false,
            is_top: false,
            type: this.props.params.id ? 'edit' : 'add',
        };
    }

    componentDidMount() {
        if (this.state.type == 'edit') {
            this.loadCategoryData();
        }
        this.loadTmpList();
    }

    changeHandler(field) {
        return (e)=> {
            let info = this.state.data;
            if (e.target != undefined) {
                info[field] = e.target.value;
                if (field == 'ctg_name') {
                    this.getPinyin(e.target.value);
                }
            } else {
                info[field] = e;
            }
            this.setState({data: info});
        }
    }

    getPinyin(str) {
        Fetch('/cms/article_category_manage/get_pin_yin', {keyword: str}, (res)=> {
            if (res.status) {
                let info = this.state.data;
                info['ctg_eng_name'] = res.data;
                this.setState({data: info});
            }
        });
    }

    loadCategoryData() {
        Fetch('/cms/article_category_manage/info', {cipher_id: this.props.params.id}, (res)=> {
            if (res.status) {
                let data = this.state.data;
                $.map(data, (item, index)=> {
                    data[index] = res.data[index];
                });
                this.setState({
                    data: data
                })
            } else {
                this.modal.alert('错误', '获取分类信息失败');
            }
        });
    }

    loadTmpList() {
        Fetch('/cms/template_manage/get_all', {}, (res)=> {
            if (res.status) {
                this.setState({
                    tmp_data: res.data.data
                });
            } else {
                this.modal.alert('错误', '查询模板数据失败');
            }
        });
    }

    selectCategory = ()=> {
        this.modal.view('分类选择', 'category', {}, (res)=> {
            var data = this.state.data;
            data['ctg_parent_id'] = res['ctg_id'];
            data['ctg_parent_name'] = res['ctg_name'];
            this.setState({
                data: data,
            });
        });
    }

    selectTmp = ()=> {
        this.modal.view('模板选择', 'template', {}, (res)=> {
            var data = this.state.data;
            data['tmp_id'] = res['tmp_id'];
            data['tmp_name'] = res['tmp_name'];
            this.setState({
                data: data,
            });
        });
    }

    topHandler = (e)=> {
        let is_top = false;
        let data = this.state.data
        if(e.target.checked){
            is_top = true;
            data.ctg_parent_name = '';
        }else{
            is_top = false;
        }
        this.setState({
            is_top: is_top,
            data:data
        });

    }

    checkData() {
        let valid = {
            ctg_name: {role: '*', errmsg: '分类名称不能为空'},
            ctg_eng_name: {role: '*', errmsg: '分类英文名不能为空'},
            ctg_publish_path: {role: '*', errmsg: '发布路径不能为空'},
            tmp_id: {role: '*', errmsg: '模板不能为空'},
        };
        let data = this.state.data;
        try {
            Validate.inst().checkData(data, valid);
            return data;
        } catch (e) {
            this.modal.alert('错误', e);
            return false;
        }
    }

    save = ()=> {
        let data = this.checkData();
        if (data === false || this.state.is_save)return;
        this.setState({
            is_save: true
        });
        Fetch('/cms/article_category_manage/save', {data: data}, (res)=> {
            if (res.status) {
                this.modal.alert('成功', '保存分类成功!', ()=> {
                    this.context.router.goBack();
                });
            } else {
                this.modal.alert('失败', '保存分类失败!!');
                this.setState({
                    is_save: false
                });
            }
        }, ()=> {
            this.modal.alert('失败', '远程调用失败!!');
            this.setState({
                is_save: false
            });
        });
    }

    render() {
        let data = this.state.data;
        return (
            <div className="content">
                <Header title={this.state.type === 'edit' ? '修改文章分类' : '添加文章分类'} back={true}/>
                <div className="content_main">
                    <div style={{marginBottom: '20px'}}>
                        <h4 className="title">分类信息</h4>
                    </div>
                    <Form ref="from" horizontal style={{marginTop: '20px'}}>
                        <Input ref="ctg_name" label="分类名称"
                               labelClassName="am-u-sm-2"
                               wrapperClassName="am-u-sm-4 am-u-end"
                               value={data.ctg_name}
                               placeholder="请输入分类"
                               onChange={this.changeHandler('ctg_name')}
                        />
                        <Input ref="ctg_eng_name" label="英文名称"
                               labelClassName="am-u-sm-2"
                               wrapperClassName="am-u-sm-4 am-u-end"
                               value={data.ctg_eng_name}
                               placeholder="请输入分类"
                               onChange={this.changeHandler('ctg_eng_name')}
                        />

                        <div className="am-form-group">
                            <label className="am-u-sm-2 am-form-label">
                                上级分类
                            </label>
                            <div className="am-u-sm-4 am-u-end">
                                <div className="am-u-sm-5 am-u-end">
                                    <Input ref="parent_name"
                                           style={{marginLeft: '-17px'}}
                                           placeholder="请选择上级分类"
                                           disabled={true}
                                           value={data.ctg_parent_name || ''}
                                           />
                                </div>
                                <div className="am-u-sm-4 am-u-end">
                                    <Button amStyle="secondary" onClick={this.selectCategory} radius
                                            disabled={this.state.is_top} style={{float: ' left'}}>选择上级分类</Button>
                                </div>
                                <div className="am-u-sm-3 am-u-end">
                                    <Input type="checkbox" ref="top" onChange={this.topHandler}
                                           label="顶级分类" />
                                </div>
                            </div>
                        </div>
                        <Input ref="ctg_publish_path" label="发布路径"
                               labelClassName="am-u-sm-2"
                               placeholder="请输入发布路径"
                               wrapperClassName="am-u-sm-4 am-u-end"
                               value={data.ctg_publish_path}
                               onChange={this.changeHandler('ctg_publish_path')}
                        />
                        <div className="am-form-group">
                            <label className="am-u-sm-2 am-form-label">
                                发布模板
                            </label>
                            <div className="am-u-sm-4 am-u-end">
                                <input type="text" ref="tmp_id"
                                       style={{width: '300px', marginRight: '10px', float: ' left'}}
                                       placeholder="请选择发布模板"
                                       value={data.tmp_name}
                                       class="am-form-field"/>
                                <Button amStyle="secondary" onClick={this.selectTmp} radius>请选择模板</Button>
                            </div>
                        </div>
                        <Input ref="ctg_link" label="外链地址"
                               labelClassName="am-u-sm-2"
                               placeholder="请输入外部链接地址"
                               wrapperClassName="am-u-sm-4 am-u-end"
                               value={data.ctg_link}
                               onChange={this.changeHandler('ctg_link')}
                        />
                    </Form>
                    <div className="am-form-group">
                        <div className="am-u-sm-2">
                            &nbsp;
                        </div>
                        <div className="am-u-sm-4 am-u-end">
                            <Button amStyle="primary"
                                    onClick={this.save}
                                    disabled={this.state.is_save}
                                    radius
                            >
                                {this.state.is_save ? '保存中...' : '保存'}
                            </Button>
                        </div>
                    </div>
                </div>
                <CKModal ref={(c)=> {
                    this.modal = c
                }}/>
            </div>
        )
    }
}
ArticleCategoryEdit.contextTypes = {
    router: React.PropTypes.object
};
export default ArticleCategoryEdit;